@import "_normalize.less";
@import "_mixins.less";
#mask(@maskColor, @opacity: 0.1) {
	position: relative;
	img {
		display: block;
		width: 100%;
	}
	.mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: @maskColor;
		opacity: @opacity; // filter:Alpha(opacity=(@opacity * 100));
	}
}

#maskContent() {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

//BORDER 三角形
.tangle(@dir:"up",@height,@base,@color){
	border-style:solid;

	& when (@dir = "left"){
		border-width:@base/2 @height @base/2 0;
		border-color: transparent @color transparent  transparent ;
	}

	& when (@dir = "right"){
		border-width:@base/2 0 @base/2 @height;
		border-color: transparent  transparent  transparent @color;
	}

	& when (@dir = "up"){
		border-width:0 @base/2 @height @base/2 ;
		border-color: transparent  transparent @color transparent ;
	}

	& when (@dir = "down"){
		border-width:@height @base/2 0 @base/2 ;
		border-color:@color transparent  transparent  transparent ;
	}
}

//======================
html {
	font-size: @fontBaseSize;
}

body {
	min-width: 1280px;
	overflow-x: auto;
}

//======================
.nav {
	@navHeight: 57px;
	#navHeight() {
		height: @navHeight;
		line-height: @navHeight;
	}
	box-sizing: border-box;
	width: 100%;
	.logo {
		display: inline-block;
		text-decoration: none;
		color: black;
		font-size: 1.5rem;
		margin-left: 50px;
		#navHeight();
		i {
			.color();
			font-size: 2rem;
		}
	}
	.navList {
		float: right;
		li {
			display: inline-block;
			margin-right: 2em;
			#navHeight();
			&:hover,
			&:active {
				border-bottom: @theme-color 5px solid;
				color: @theme-color;
				box-sizing: border-box;
			}
		}
		li:last-child {
			color: @theme-color;
			i {
				font-size: 1.3em;
			}
		}
	}
}

//======================
.banner {
	#mask(#cdcccc);
	.content {
		#maskContent();
		.container {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			margin-left: 10%;
			.text {
				color: white;
				strong {
					font-size: 3rem;
					display: block;
					margin-bottom: 1rem;
				}
				span {
					display: block;
					width: 340px;
					line-height: 1.5rem;
				}
				margin-bottom: 20px;
			}
			.button {
				line-height: 3rem;
				height: 3rem;
				color: white;
				text-align: center;
				font-size: 1.3rem;
				width: 340px;
				background: @theme-deepcolor;
				&:hover {
					background-color: @theme-color;
				}
			}
		}
	}
}

//======================
.slogen {
	height: 250px;
	.col-25 {
		width: 25%;
		text-align: center;
		float: left;
		i {
			font-size: 3rem;
			display: inline-block;
			width: 100%;
			line-height: 150px;
			color: @theme-color;
		}
		span {
			display: inline-block;
			width: 100%;
			color: @gray-600;
			box-sizing: border-box;
			height: 50px;
			padding: 0 30px;
			line-height: 1.5rem;
			border-left: 1px solid @gray-600;
			border-right: 1px solid @gray-600;
		}
		.clearLeftBorder {
			border-left: 0 !important;
		}
		.clearRightBorder {
			border-right: 0 !important;
		}
	}
}

//======================
.middleQuestion {
	height: 360px;
	background-color: @gray-300;
	text-align: center;
	i {
		display: block;
		line-height: 220px;
		color: @theme-color;
		font-size: 96px;
	}
	span {
		color: @gray-600;
		font-size: 48px;
	}
}

//======================
.search {
	#mask(#eed6d6);
	.content {
		#maskContent();
		padding: 30px 100px;
		color: white;
		.title {
			text-align: center;
			font-size: 2rem;
			&:after {
				display: block;
				background: white;
				width: 1.3em;
				height: 3px;
				margin: 10px auto;
				content: "";
			}
		}
		.subtitle {
			text-align: center;
		}
		//==========================================
		form {
			//===========mixin======
			//============
			ul,
			li {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			//============
			margin-top: 55px;

			.formItem {
				@formItemgap: 10px;

				width: 25%;
				padding: 0 @formItemgap;

				box-sizing: border-box;
				position: relative;
				float: left;

				@border-width: 2px;

				@formItemHeight: 35px;
				@selectHeight: @formItemHeight;
				@dropdownDefaultHeight: 20px; //正方形

				@dropdownActiveHeight: min(@dropdownDefaultHeight, @selectHeight);
				@dropdownMargin: ((@formItemHeight - @dropdownActiveHeight)/2);

				.themeBorder() {
					border: @border-width solid #be6e65;
				}
				.visibleOptions() {
					.themeBorder();
					border-top: 0;

					background: #e3e3e3;
					color: #898989;

					li {
						height: @selectHeight - 5px;
						line-height: @selectHeight - 5px;
						padding-left: 2em;
						position: relative;
					}
					li:hover {
						background: @theme-color;
					}
					li[checked] {
						background: @theme-color;
						&:before {
							position: absolute;
							top: 0;
							left: 0.5em;
							content: "✔";
						}
					}
				}
				.dropDown() {
					position: absolute;
					top: 0;
					right: @formItemgap;
					margin: @dropdownMargin;
					background-color: @theme-color;
					text-align: center;

					width: @dropdownActiveHeight;
					height: @dropdownActiveHeight;
					line-height: @dropdownActiveHeight;

					font-family: "iconfont";
					font-style: normal;
					content: "\e65f";
					z-index: 10;
					pointer-events: none;
				}

				input {
					padding: 5px;
					width: 100%;
					appearance: none;
					//===

					height: @selectHeight;
					line-height: @selectHeight;
					box-sizing: border-box;

					& {
						border: @border-width #999 solid;
						~ .options {
							display: none;
						}
						~ .dropDown:after {
							.dropDown();
						}
					}
					//=
					&:hover,
					&:focus {
						.themeBorder();

						~ .options {
							display: block;
							.visibleOptions();
						}
						~ .dropDown:after {
							.dropDown();
							content: "\e65e";
						}
					}
				}

				//===========
			}
		}
	}
}

//==========================

.activity{
	background-color: #f7f7f7;
	padding:100px 85px;
	
	.item{
		width:25%;
		padding:10px 0;
		display: inline-block;
		// float: left;
		position: relative;
	}

	text-align: center;
	img{
		background: white;
		padding: 10px;
		border:1px solid #ccc
	}

	.text{
		font-size: 14px;
		color: #666;
		line-height: 2em;
	}
	.large{
		line-height: 1.5em;
		font-size: 28px;
		text-align: justify;
	}
}

//============================

.NewWorld{
	@PICHEIGHT:556px;
	@PICWIDTH:850px;
	.pic{

		position: relative;
		background: url("../image/middle-left.jpg");
		width:@PICWIDTH;
		height:@PICHEIGHT;

		display: block;float: left;
		
		text-align: center;
		
		line-height: @PICHEIGHT;

		.mask{
			color:white;
			// text-align: center;
			font-size: 16px;
			line-height: 1.5em;
			display: inline-block;
			vertical-align:middle;
			h2{
				font-size: 49.47px;
			}

			h1{
				font-size: 157.79px;
			}
			
		}

		&::after{
			position: absolute;
			right:0;
			top:0.5 * @PICHEIGHT - @base / 2;
			display:block;
			content:'';

			@base:32px;
			.tangle("left",25px,@base,white);
		}
	}

	.info{
		// float: left;
		display: inline-table;
		width: calc( ~"100% - @{PICWIDTH}" );
		height: @PICHEIGHT;
		text-align: center;
		.content{
			display:table-cell;
			vertical-align: middle;
			padding:0 80px;
		}
		header{
			font-size: 28px;
			margin-bottom:30px;
			.c-red{
				color:red;
			}
		}
		p{
			font-size: 14px;
			line-height: 2em;
			color:#999;
			text-align: left;
		}
		.button{
			width:120px;
			height:40px;
			line-height: 40px;
			border:1px solid @theme-color;
			color:@theme-color;
			margin:30px auto;

			&:hover{
				border:1px solid @theme-color;
				background: @theme-color;
				color:white;
			}
		}
		
		.sec{
			margin-top:10px;
			span{
				display: inline-block;
				border-radius: 50%;
				border:1px solid gray;
				width:10px;
				height: 10px;
				margin: 0 10px;

				&.full{
					background:gray;
				}
			}
			
			span:hover{
				background:gray;

				& ~ span{
					background:white!important;
				}
			}
		}
	}
}

//===============================

.ViewMore{
	
	@PICHEIGHT:521px * @lamaba;
	@PICWIDTH:499px;
	@lamaba:( 499px / 430px );
	height:@PICHEIGHT;
	
	.first{
		width: calc( ~"( 100% - @{PICWIDTH} ) / 2" );
		background: @theme-color;
		color:white;
		hr{
			border: 1px solid white;
		}
		.button{
			border:1px solid white;
		}
	}
	.second{
		width: calc( ~"( 100% - @{PICWIDTH} ) / 2" );
		hr{
			border: 1px solid #aaa;
		}
		.button{
			border:1px solid @theme-color;
			color:@theme-color;
		}
	}
	section{
		height:@PICHEIGHT;
		display: block;float: left;
		line-height: @PICHEIGHT;
		text-align: center;
		.content{
			display: inline-block;
			vertical-align: middle;

			header{
				font-size: 22px;
				line-height: 1.8em;
			}
			hr{
				width:2em;

			}
			.button{
				font-size: 22px;
				width:160px;
				height:40px;
				line-height: 40px;
				// border:1px solid @theme-color;
				// color:@theme-color;
				margin:30px auto;
	
				// &:hover{
				// 	border:1px solid @theme-color;
				// 	background: @theme-color;
				// 	color:white;
				// }
			}
		}
	}
	
	.img{
		width:@PICWIDTH;
		background-image: url("../image/train.png");
		background-size: 100%;

		position: relative;
		&:before{
			position: absolute;
			left:0;
			top:0.5 * @PICHEIGHT - @base / 2;
			display:block;
			content:'';

			@base:32px;
			.tangle("right",25px,@base,white);
		}
	}
}

//==============================
.joinUs{
	padding:100px;

	header{
		text-align: center;
		
		.title{
			font-size: 24px;
			font-weight: 500;
			margin-bottom: 10px;
		}
		hr{
			margin: 0 auto;
			border:1px solid @theme-color;
			width: 2em;
			margin-bottom: 12px;
		}
		.sub{
			font-size: 12px;
			color:#aaaaaa;
			line-height: 1.5em;
		}
		margin-bottom: 50px;
	}
	.agreement{
		width: 30%;
		margin-right: 3%;
		display: inline-block;
		.t{
			font-size: 16px;
			padding:20px 0;
			color:#666
		}
		.content{
			font-size: 12px;
			color:#aaa;
			position: relative;
			line-height: 2em;
			padding-bottom:1em;

			&:after{
				content: "↓more";
				position: absolute;
				bottom:0;right:0;
			}
		}
	}

	.placeholder(){
		.style(){
			font-size: 12px;
			color:#666;
			font-weight: 800;
		}
		&::-webkit-input-placeholder{
			.style()
		}
		&::-moz-placeholder{
			.style()
		}
		&:-ms-input-placeholder {
			.style()
		}
	}
	form{
		padding-top:20px;
		width:66%;
		display: block;float:right;
		font-size: 14px;
		input[type=text]{
			appearance: none;
			border:0;
			padding:10px 0 10px 1em;
			box-sizing: border-box;
			background: #eee;
			width:49%;
			margin-right: 1%;
			margin-bottom:10px;

			.placeholder()
		}

		textarea{
			width:99%;
			height:180px;
			background: #eee;
			appearance: none;
			overflow-y: auto;
			overflow-x: hidden;
			resize:none;
			border:0;
			padding:1em;
			box-sizing: border-box;
			margin-bottom:10px;
		}
		button{
			appearance: none;
			border:0;
			width:99%;
			height:50px;
			line-height: 50px;
			background: #eee
		}
	}

}

//===================================
.contactUs{
	background: #33363f;
	height: 300px;
	color:white;
	text-align: center;
	display: flex;
	justify-content: center;
	flex-direction:column;	

	h2{
		margin:10px 0;
	}
	p{
		font-size:12px;
		line-height: 2em;
	}
	form {
		input{
			appearance: none;
			border: 0;
			&[type=email]{
				width:400px;
				padding:10px;
			}
			&[type=button]{
				width:100px;
				padding:10px;
			}
		}
	}
	.link{
		margin-top:20px;
		a{
			margin:0 10px;
		}
	}
}
//============================
footer{
	height:50px;
	background: #30303a;
	color: white;
	padding:0 50px;
	font-size: 12px;
	.Copyright{
		float: left;
		height:50px;line-height: 50px;
	}

	.backup{
		float: right;
		height:50px;line-height: 50px;
		a,a:focus{
			color:white;
			text-decoration: none;
		}
	}
}